<!--  -->
<template>
  <div class='padding20 teachDetail'>
    <div style="margin-bottom:10px">
      <!-- <el-page-header @back='$router.push(originPath)' content=''></el-page-header> -->
      <el-button type="primary" @click="$router.push(originPath)">返回</el-button>
    </div>
    <el-card>
    <div style="display:flex">
      <div style="flex:1">
        <el-image :src="host +teacherInfo.headPath" style='width:300px;height:300px; '>
            <div slot="error" class="image-slot noImage">暂无图片</div>
        </el-image>
      </div>
      <div style="flex:4;margin-left:20px">
        <el-descriptions title="" :column="2" style="display:inline-block" :colon='true'>
          <el-descriptions-item :span="2" label="姓名">
            {{teacherInfo.realName}}
          </el-descriptions-item>
          <el-descriptions-item label="毕业院校">{{teacherInfo.school}}</el-descriptions-item>
          <el-descriptions-item label="毕业时间">{{teacherInfo.graduationDate}}</el-descriptions-item>
          <el-descriptions-item label="所属专业">{{teacherInfo.majorCourse}}</el-descriptions-item>
          <el-descriptions-item label="评级职称"> {{teacherInfo.ratingTitle}}</el-descriptions-item>
          <el-descriptions-item :span="2" label="经历">
            {{teacherInfo.experience}}
          </el-descriptions-item>
          <el-descriptions-item :span="2" label="获奖情况">
            {{teacherInfo.awardGetList}}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    </el-card>
    <div class="titleLine">所授课程</div>
    <el-card style="margin-top: -20myCoursepx;">
      <CommonPic :list='courseList' @clickDetail='getDetail'></CommonPic>
      <el-pagination class="pageBar"  background @size-change="sizeChange" @current-change="currentChange" :current-page="pageInfo.currentPage" :page-sizes="[2, 5,10, 20, 30]" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalRecordCount">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import operateApi from "../api/operate.service.js";
export default {
  components: {},
  data() {
    return {
      teacherInfo: {},
      teacherId: "",
      host: window.location.href.split("/#/")[0] + "/api",
      courseList: [],
      pageInfo: {
        currentPage: 1,
        pageSize: 10,
      },
      totalRecordCount: 0,
      originPath: "",
    };
  },
  mounted() {
    this.teacherId = this.$route.query.data;
    this.getDetailAndPassedCourses();
    // 解决刷新失效不能返回问题
    this.originPath =
      this.$route.query.originPath
  },
  computed: {},
  watch: {},
  methods: {
    async getDetailAndPassedCourses() {
      let { data } = await operateApi.getDetailAndPassedCourses({
        teacherId: this.teacherId,
        ...this.pageInfo,
      });
      this.teacherInfo = data.data.person;
      this.courseList = data.data.courseList.records;
      this.totalRecordCount = data.data.courseList.totalRecordCount;
    },
    getDetail(data) {
      this.$router.push({
        path: "/courseDetail",
        query: {
          id: data.id,
          originPath: "/teacherDetail",
          teacherId:this.teacherId

        },
      });
    },
    sizeChange(val) {
      this.pageInfo.pageSize = val;
      this.getDetailAndPassedCourses();
    },
    currentChange(val) {
      this.pageInfo.currentPage = val;
      this.getDetailAndPassedCourses();
    },
  },
  created() {},
};
</script>
<style lang="less" scoped>

.teachDetail {
  /deep/ .el-descriptions__body {
    background-color: transparent;
  }
}
</style>
<style lang="less">
@color: rgb(229, 229, 229);
.teachDetail .noImage{
  background: @color;
  border-radius:15px;
  height: 100%;
  width: 100%;
  text-align: center;
  line-height: 300px;
}
</style>
